<template>
  <view class="index">
    <!-- 首页 -->
	<home v-if="currentIndex === 0" :style="{display: currentIndex === 0 ? '' : 'none'}" ref="home"></home>
    <!-- 仓库 -->
	<library v-if="currentIndex === 1" :style="{display: currentIndex === 1 ? '' : 'none'}" ref="library"></library>
	<!-- 发现 -->
	<discover v-if="currentIndex === 2" :style="{display: currentIndex === 2 ? '' : 'none'}" ref="discover"></discover>
	<!-- 个人中心 -->
	<person v-if="currentIndex === 3" :style="{display: currentIndex === 3 ? '' : 'none'}" ref="person"></person>
	<!-- 管理中心 -->
	<control v-if="currentIndex === 4" :style="{display: currentIndex === 4 ? '' : 'none'}" ref="control"></control>
	
	<!-- 底部导航栏 -->
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="tn-cool-bg-color-6"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar>

  </view>
</template>

<script>
  import Home from '@/pages/home/home.vue';
  import Person from '@/pages/person/person.vue';
  import Discover from '@/pages/discover/discover.vue';
  import Library from '@/pages/library/library.vue';
  import {mapState} from 'vuex';
  import Control from '@/pages/control/index.vue';
  export default {
    components: {
		Home,
		Person,
		Discover,
		Library,
		Control
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首页',
            activeIcon: 'count-fill',
            inactiveIcon: 'menu'
          },
          {
            title: '仓库',
            activeIcon: 'honor-fill',
            inactiveIcon: 'honor'
          },
          {
            title: '发现',
            activeIcon: 'discover-planet-fill',
            inactiveIcon: 'discover-planet'
          },
          {
            title: '我的',
            activeIcon: 'my-fill',
            inactiveIcon: 'my',
            // dot: true // 红点
          }
        ],
		// 是否是管理员
		isAdmin:false,
        // tabbar当前被选中的序号
        currentIndex: 0
      }
    },
    onLoad(options) {
      
    },
	watch:{
		userInfo(newVal,oldVal){
			if (newVal.role === 'ADMIN' && this.isAdmin !== true){
				this.isAdmin = true;
				const adminBar = {
					  title: '管理',
					  activeIcon: 'set-fill',
					  inactiveIcon: 'set',
					  // dot: true // 红点
				}
				this.tabbarList.push(adminBar);
			}
		}
	},
	computed: {
	  // 将vuex的state中的变量结构到全局混入mixin中
	  ...mapState({
		  userInfo: state => state.userInfo
	  })
	},
    onPageScroll(e) {
    },
    onReachBottom() {
    },
    methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
      },
      
      // 导航页面滚动到底部
      tabbarPageScrollLower(e) {
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .index {
    overflow: hidden;
    height: 100%;
  }
  
  .custom-tabbar-page {
    height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  }

</style>
